<template>
  <el-container>
    <el-aside :width="isCollapse?'60px':'230px'">
      <div class="main-container">
        <div class="logo-container">
<!--          <logo :collapse="isCollapse"></logo>-->
        </div>
        <div class="menu-container">
          <el-scrollbar wrap-class="scrollbar-wrapper">
            <el-menu
              @open="handleOpen"
              :collapse="isCollapse"
              :unique-opened="true"
              :default-active="this.$route.path"
              :collapse-transition="false"
              background-color="#304156"
              text-color="#fff"
              active-text-color="#ffd04b"
              router
            >
              <el-menu-item
                v-for="(menu, index) in this.menuList"
                :key="index"
                :index="menu.path"
              >
                <el-icon :class="menu.icon"/>
                <span>{{ menu.menuName }}</span>
              </el-menu-item>

              <el-submenu
                v-for="(menu, index) in this.menuList"
                :key="index"
                :index="menu.path"
              >
                <template slot="title">
                  <i :class="menu.icon"></i>
                  <span>{{ menu.menuName }}</span>
                </template>
                <el-menu-item
                  v-for="(item, index) in menu.children"
                  :key="index"
                  :index="item.path"
                >
                  <el-icon :class="item.icon"/>
                  <span>{{ item.menuName }}</span>
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-scrollbar>
        </div>
      </div>
    </el-aside>
    <el-container>
      <el-header>
        <div class="nav-container">
          <div class="left-container">
            <div class="change" @click="setCollapse">
              <el-icon :class="isCollapse?'close el-icon-s-unfold':'close el-icon-s-fold'"/>
            </div>
            <el-breadcrumb separator="/" class="bread-container">
              <el-breadcrumb-item v-for="item of breadcrumbList" :key="item.path">
                <span>{{ item.name }}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="right-container">
<!--            <el-tooltip content="全屏" placement="bottom">-->
<!--              <svg @click="fullPage" class="icon" aria-hidden="true">-->
<!--                <use xlink:href="#nanjustar-quanping-"></use>-->
<!--              </svg>-->
<!--            </el-tooltip>-->
            <el-tooltip content="Github" placement="bottom">
              <svg @click="toGithub" class="icon" aria-hidden="true">
                <use xlink:href="#nanjustar-github"></use>
              </svg>
            </el-tooltip>
            <el-tooltip content="用户身份" placement="bottom">
              <el-tag class="level"> userInfo.consumerLevel }}</el-tag>
            </el-tooltip>
            <el-dropdown class="dropdown" trigger="click" @command="handleCommand">
              <img class="avatar" src="userInfo.avatar">
              <i class="el-icon-arrow-down el-icon--right"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-s-custom" command="personCenter">个人中心</el-dropdown-item>
                <el-dropdown-item icon="el-icon-s-operation" command="layoutSetting">布局设置</el-dropdown-item>
                <el-dropdown-item divided icon="el-icon-moon" command="logout">退出登陆</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </div>
        </div>
      </el-header>
      <el-main>
        <div>
          <div class="tabs-view-container">
            <div class="tabs-wrapper">
        <span
          :class="isActive(item)"
          v-for="item of tabList"
          :index="item.path"
          :key="item.path"
          @click="goTo(item)"
        >
          {{ item.name }}
          <i
            class="el-icon-close"
            v-if="item.path != '/'"
            @click.stop="removeTab(item)"/>
        </span>
            </div>
            <div class="tabs-close-item" style="float:right" @click="closeAllTab">
              全部关闭
            </div>
          </div>
        </div>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// eslint-disable-next-line import/no-absolute-path

export default {
  name: 'test',
  data () {
    return {
      isCollapse: false,
      breadcrumbList: [],
      tabList: [],
      currentRoute: this.$route.path,
      menuList: [],
      userInfo: {
        test: ''
      }
    }
  },
  methods: {
    toGithub () {
      window.open('https://gitee.com/duan_nan/nanjustar-template')
    },
    handleCommand (command) {
      if (command === 'personCenter') {

      } else if (command === 'layoutSetting') {

      } else if (command === 'logout') {
        this.consumerLogout()
      }
    },
    consumerLogout () {
      this.$confirm('确定要退出系统?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout()
        this.$router.replace('/')
        window.sessionStorage.removeItem('vuex')
      })
    },
    created () {
      // 替换面包屑导航
      let matched = this.$route.matched.filter(item => item.name)
      const first = matched[0]
      if (first && first.name !== '首页') {
        matched = [{ path: '/', name: '首页' }].concat(matched)
      }
      this.breadcrumbList = matched
    },
    handleOpen () {
    },
    setCollapse () {
    }
  },
  created () {
    this.$notify.success({
      message: '欢迎👏来到 楠橘星后台管理系统。' +
        "详情访问 <a href='https://gitee.com/duan_nan/nanjustar-template'>https://gitee.com/duan_nan/nanjustar-template</a>",
      duration: 5000,
      dangerouslyUseHTMLString: true
    })
  },
  mounted () {
    // 保存当前页标签
    this.$store.dispatch('saveTab', this.$route)
  }
}
</script>

<style scoped>

.el-container {
  height: 100%;
}

.el-header, .el-footer {
  height: 50px !important;
  line-height: 50px;
}

.el-aside {
  line-height: 200px;
  height: 100%;
  background-color: #304156;
}

.el-main {
  background-color: #f5f4f4;
  height: 100%;
}

.navList {
  margin: -19px -20px 0 -20px;
}
.main-container {
  width: 101%;
  height: 100%;
  overflow-x: hidden;
}

.main-container .logo-container {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.nav-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  line-height: 50px;
  align-items: center;
}

.change {
  cursor: pointer;
  font-size: 26px;
}

.left-container {
  display: flex;
  justify-content: left;
  align-items: center;
}

.right-container {
  display: flex;
  justify-content: right;
  align-items: center;
}

.right-container .icon {
  cursor: pointer;
  width: 30px;
  height: 30px;
  margin-right: 15px;
}

.right-container .level {
  cursor: pointer;
  margin-right: 15px;
}

.right-container .dropdown {
  height: 40px;
}

.right-container .dropdown .avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.bread-container {
  margin-left: 20px;
  font-size: 15px;
  margin-top: -4px;
}
.tabs-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  width: 95%;
}

.tabs-view-container {
  display: flex;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  height: 33px;
  background: #fff;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
}

.tabs-view-item {
  display: inline-block;
  cursor: pointer;
  height: 25px;
  line-height: 25px;
  border: 1px solid #d8dce5;
  color: #495060;
  background: #fff;
  padding: 0 8px;
  font-size: 12px;
  margin-top: 4px;
  margin-left: 5px;
}

.tabs-close-item {
  position: absolute;
  right: 10px;
  display: inline-block;
  cursor: pointer;
  height: 25px;
  line-height: 25px;
  border: 1px solid #d8dce5;
  color: #495060;
  background: #fff;
  padding: 0 8px;
  font-size: 12px;
  margin-top: 4px;
  margin-left: 5px;
}

.tabs-view-item-active {
  display: inline-block;
  cursor: pointer;
  height: 26px;
  line-height: 26px;
  padding: 0 8px;
  font-size: 12px;
  margin-top: 4px;
  margin-left: 5px;
  background-color: #5839ac;
  color: #fff;
  border-color: #5839ac;
}

.tabs-view-item-active:before {
  content: "";
  background: #fff;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  margin-right: 2px;
}
</style>
